{% extends "admin/layout.html" %}

{% block content %}
<!-- Page Wrapper -->
<div id="wrapper">

{% include "admin/_slidebar.html"%}

<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">

  <!-- Main Content -->
  <div id="content">

    {% include "admin/_topbar.html"%}

    <!-- Begin Page Content -->
    <div class="container-fluid">
      {% include 'admin/_messages.html' %}

      <!-- DataTales Example -->
      <div class="card shadow mb-4">
        <div class="card-header py-3">
          <a class="m-0 font-weight-bold text-primary">DataTables Plant </a>
          <a class="add" title="Add Plant" data-toggle="modal" data-target="#addPlant" href="#" style="float: right;"><i class="material-icons" style="float: right;">&#xE03B;</i></a>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Number of Days</th>
                  <th>Number of Phases</th>
                  <th>Phases</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for plant in plants %}
                    <tr>
                      <td>{{plant.id}}</td>
                      <td>
                        <a href="{{url_for('static', filename='img/plant-img/'+plant.avatar)}}">{{plant.name}}</a>
                        <div class="box">
                          <image src="{{url_for('static', filename='img/plant-img/'+plant.avatar)}}" class="image_hover">
                          </image>
                        </div>
                      </td>
                      <td>
                        {{ plant.phases | sum(attribute='number_of_days') }}
                      </td>
                      <td>{{plant.phases.count()}}</td>
                      <td>
                        {% for phase in plant.phases | sort(attribute='order') %}
                          <div style="white-space:pre;"><a>{{phase.order}} - {{phase.name}} : {{phase.number_of_days}} day(s)</a> <span style="margin: auto;padding: 10px;"> <a title="Phase Detail" href="{{url_for('admin.show_phase_detail', id=phase.id)}}"><i class="material-icons">search</i></a> <a class="edit" title="Edit Phase" data-toggle="modal" data-target="#editPhase" data-plant-name="{{phase.plant.name}}" data-phase-id="{{phase.id}}" data-phase-name="{{phase.name}}" data-phase-order="{{phase.order}}" data-phase-days="{{phase.number_of_days}}" href="#"><i class="material-icons">&#xE254;</i></a> <a class="delete" title="Delete Phase" data-toggle="modal" data-target="#deletePhase" data-phase-id="{{phase.id}}" href="#"><i class="material-icons">&#xE872;</i></a></span></div>
                        {% endfor %}
                      </td>
                      <td>
                         <a class="add" title="Add Phase" data-toggle="modal" data-target="#addPhase" data-plant-id={{plant.id}} data-plant-name="{{plant.name}}" href="#"><i class="material-icons">&#xE03B;</i></a>
                         <a class="edit" title="Edit Plant" data-toggle="modal" data-target="#editPlant" data-plant-id={{plant.id}} data-plant-name="{{plant.name}}" href="#"><i class="material-icons">&#xE254;</i></a>
                         <a class="delete" title="Delete Plant" data-toggle="modal" data-target="#deletePlant" data-plant-id={{plant.id}} href="#" ><i class="material-icons">&#xE872;</i></a>
                      </td>

                    </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
    <!-- /.container-fluid -->

  </div>
  <!-- End of Main Content -->

  {% include 'admin/_footer.html' %}

</div>
<!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
    <div class="modal-footer">
      <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
      <a class="btn btn-primary" href="{{ url_for('logout') }}">Logout</a>
    </div>
  </div>
</div>
</div>

<!--add plant modal-->
  <div class="modal fade" id="addPlant" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="add-plant-modal">Add Plant</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" id="add-x">×</span>
        </button>
      </div>
      <form action="{{url_for('admin.add_plant')}}" enctype="multipart/form-data" method="post" id="add-form">
        {{add_form.csrf_token()}}
      <div class="modal-body">
        <div class="form-group">
			<div class="input-group">
            {{add_form.name(class_="form-control", placeholder="Plant Name")}}
            </div>
        </div>

        <div class="form-group">
          <label>Select plant image:</label>
			<div class="input-group">
              {{add_form.avatar(accept="image/*")}}
            </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal" id="add-cancel">Cancel</button>
        <input class="btn btn-primary" type="submit" value="Save" />
      </div>
      </form>
    </div>
    </div>
  </div>


<!--edit plant modal-->
  <div class="modal fade" id="editPlant" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="edit-plant-modal">Edit Plant</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" id="edit-x">×</span>
        </button>
      </div>
      <form action="{{url_for('admin.edit_plant')}}" enctype="multipart/form-data" method="post" id="edit-form">
        {{edit_form.csrf_token()}}
      <div class="modal-body">
        {{edit_form.plant_id(value="")}}
        <div class="form-group" id="plant_id">
          ID:
        </div>
        <div class="form-group">
            <div>Plant Name: </div>
			<div class="input-group">
            {{edit_form.name(class_="form-control", id="edit-plant-name", placeholder="Plant Name")}}
            </div>
        </div>


        <div class="form-group">
            <label>Select plant image:</label>
			<div class="input-group">
              {{edit_form.avatar(accept="image/*")}}
            </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal" id="edit-cancel">Cancel</button>
        <input class="btn btn-primary" type="submit" value="Save" />
      </div>
      </form>
    </div>
    </div>
  </div>

<!--delete plant modal-->
  <div class="modal fade" id="deletePlant" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="delete-plant-modal">Confirm</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">Select "Confirm" below if you want to delete plant.
          Delete plant will delete phases and images in this plant. Do you want to continue?
        <input type="hidden" name="plant_id" id="delete-plant-plant_id" value="">
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a class="btn btn-primary" name="confirm" href="" >Confirm </a>
      </div>
    </div>
    </div>
  </div>

<!--delete phase modal-->
  <div class="modal fade" id="deletePhase" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="delete-phase-modal">Confirm</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">Select "Confirm" below if you want to delete this phase in the plant
        <input type="hidden" name="phase_id" id="phase_id" value="">
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a class="btn btn-primary" name="confirm" href="" >Confirm </a>
      </div>
    </div>
    </div>
  </div>

<!--add phase modal-->
  <div class="modal fade" id="addPhase" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="add-phase-modal">Add Phase</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" id="add-phase-x">×</span>
        </button>
      </div>
      <form action="{{url_for('admin.add_phase')}}" method="post" id="add-phase-form">
        {{add_phase_form.csrf_token()}}
      <div class="modal-body">
        {{add_phase_form.plant_id()}}
        <div class="form-group" id="add-phase-plant_name">
          Plant:
        </div>
        <div class="form-group">
			<div class="input-group">
            {{add_phase_form.name(class_="form-control", placeholder="Phase Name")}}
            </div>
        </div>
        <div class="form-group">
			<div class="input-group">
            {{add_phase_form.order(class_="form-control", placeholder="Order of Phase")}}
            </div>
        </div>
        <div class="form-group">
			<div class="input-group">
            {{add_phase_form.number_of_days(class_="form-control", placeholder="Number of Days")}}
            </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal" id="add-phase-cancel">Cancel</button>
        <input class="btn btn-primary" type="submit" value="Save" />
      </div>
      </form>
    </div>
    </div>
  </div>

<!--edit phase modal-->
  <div class="modal fade" id="editPhase" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="edit-phase-modal">Edit Phase</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" id="edit-phase-x">×</span>
        </button>
      </div>
      <form action="{{url_for('admin.edit_phase')}}" method="post" id="edit-phase-form">
        {{edit_phase_form.csrf_token()}}
      <div class="modal-body">
        {{edit_phase_form.phase_id(id="edit-phase-id")}}
        <div class="form-group" id="edit-phase-plant_name">
          Plant:
        </div>
        <div class="form-group">
            <div>Phase Name: </div>
			<div class="input-group">
            {{edit_phase_form.name(class_="form-control", placeholder="Phase Name")}}
            </div>
        </div>
        <div class="form-group">
            <div>Phase Order: </div>
			<div class="input-group">
            {{edit_phase_form.order(class_="form-control", placeholder="Order of Phase")}}
            </div>
        </div>
        <div class="form-group">
            <div>Number of Days: </div>
			<div class="input-group">
            {{edit_phase_form.number_of_days(class_="form-control", placeholder="Number of Days")}}
            </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal" id="edit-phase-cancel">Cancel</button>
        <input class="btn btn-primary" type="submit" value="Save" />
      </div>
      </form>
    </div>
    </div>
  </div>


<script src="{{url_for('static', filename='plants_list.js')}}"></script>
{% endblock %}